<template>
    <div>
      <table-expand
        ref="table"
        :columns="columns"
        :data="data"
        :loading="loading"
        :config="config"
        :pageSizeOpts="pageSizeOpts"
        :pageNavigation="pageNavigation"
        :queryFormItem="queryFormItem"
        :collapseFormItem="collapseFormItem"
        :additionalAction="additionalAction"
        :pageAdditionalAction="pageAdditionalAction"
        @loadPage="loadPage"
        @handleCreate="handleCreate"
        @handleDetail="handleDetail"
        @handleEdit="handleEdit"
        @handleDelete="handleDelete"
        @handleDeleteMultiple="handleDeleteMultiple"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
        @getSelection="getSelection"
      ></table-expand>
      <new-add-modal
        v-bind="addNewPanel"
        :modelType="modelType"
        :columns="formColumns"
        :rules="rules"
        @submit="handleNewAddSubmit"
      ></new-add-modal>
      <edit-modal
        v-bind="editPanel"
        :modelType="modelType"
        :columns="formColumns"
        :rules="rules"
        @submit="handleEditSubmit"
      ></edit-modal>
      <read-modal
        v-bind="readPanel"
        :modelType="modelType"
        :columns="columns"
        :rules="rules"
      ></read-modal>
      <createQrCode ref="createQrCode" :qrContentKeys="qrContentKeys"></createQrCode>
    </div>
</template>

  <script>
    import newAddModal from '@/pages/components/newAddModal.vue';
    import editModal from '@/pages/components/editModal.vue';
    import readModal from '@/pages/components/readModal.vue';
    import createQrCode from '@/pages/components/createQrCode';
    import { typeClassName } from '@/pages/config/classNameMap';
    import mixin from '@/pages/components/mixins/mixin'
    import columnsMixin from './config'
    import tableExpand from '@/pages/components/tableExpand.vue';
    export default {
        components: { newAddModal, editModal, readModal, createQrCode, tableExpand},
        name: 'meterInfo',
        mixins: [mixin,columnsMixin],
        data () {
            return {
                classObject: null, // 单个实例
                collectionObject: null, // 所有实例
                className: typeClassName['equipment'].className,
                type: typeClassName['equipment'].type,
                modelType: typeClassName['equipment'].modelType,
                addNewPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2
                },
                editPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2,
                    data: {}
                },
                readPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2,
                    data: {}
                },
                selectPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2,
                    data: {}
                },
                rules: {
                    sf_code: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ],
                    sf_name: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ],
                    sf_equipmentType: [
                        { required: true, message: '不能为空', trigger: 'blur' }
                    ]
                },
                loading: false,
                config: {
                    search: true,
                    addButton: true,
                    batchDeleteButton: true,
                    tableSizeIcon: true,
                    fullscreenIcon: true,
                    refreshIcon: false,
                    columnSettingIcon: true,
                    action: true,
                    additionalAction: false,
                    pageAdditionalAction: true
                },
                pageSizeOpts: [10, 30, 50, 100],
                pageNavigation: { total: 0, pageSize: 10, pageNumber: 1 },
                equipTypeClassObject: null,
                equipTypeOptions: [], // 类别名称选项
                // 进入页面需要的筛选条件：所属分类，'0'设备和'1'仪表
                selfFilter: { 'sf_category': '1' },
                // 新增数据需要添加的默认数据：所属分类，'0'设备和'1'仪表
                defaultAddData: { 'sf_category': '1','sf_status':'启用'  },
                tableSelection:[],
                qrContentKeys:['sf_name','id','sf_code'],  //二维码中包含的字段
            };
        },
        computed: {
            filterEquipTypeOptions () {
                return this.equipTypeOptions.filter(d => d.category === '1')
            },
            lang () {
                return {
                    'en-US': {
                        cancel: 'cancel',
                        confirmDelete: 'confirm delete?'
                    },
                    'zh-CN': {
                        cancel: '取消',
                        confirmDelete: '确认删除？'
                    }
                }[this.G_Locale]
            },
            additionalAction () {
                return {}
            },
            pageAdditionalAction () {
                return {
                    width: 200,
                    align: 'center',
                    buttons: [
                        { title: {
                              'zh-CN': '生成二维码',
                              'en-US': 'qrcode'
                          }[this.G_Locale],
                          event: () => this.getQrCode()
                        }
                    ]
                }
            },
            data () {
                if (!!this.collectionObject) {
                    return this.collectionObject.records.map(d => {
                        return {
                            ...d,
                            ...d.values
                        }
                    })
                } else {
                    return [];
                }
            }
        },
        beforeMount () {
            this.collectionObject = this.$modelObject.create(`${this.modelType}Collection`);
            this.classObject = this.$modelObject.create(this.modelType);
            this.equipTypeClassObject = this.$modelObject.create(typeClassName['equipType'].modelType);
            this.setOptionsByHier('equipType', this.equipTypeClassObject, 'equipTypeOptions', {
                label: 'sf_name', value: 'sf_code', category: 'category'
            })
            this.loadPage(this.pageNavigation, null);
        },
        mounted () {},
        methods: {
            /**
             * 删除条件
             * 仪表管理，不能删除被设备绑定或者存在抄表记录的仪表
             */
            deleteCondition(ids){
                let flag = true;
                this.collectionObject.records.filter(d=>ids.includes(d.id)).map(item=>{
                    if(item.others && item.others.basic && item.others.basic.length > 0){
                        flag = false;
                    }else if(item.hier && item.hier.basic && item.hier.basic.length > 0){
                        let index = item.hier.basic.findIndex(d=>d.pointer.className===typeClassName['meterRegisterRecord'].modelType)
                        (index !== -1) && (flag = false);
                    }
                })
                if(!flag){
                    this.$Message.error('不能删除被设备绑定或者存在抄表记录的仪表')
                }
                return flag;
            },
            getSelection(selection){
                this.tableSelection = selection;
            },
            getQrCode(){
                this.$refs.createQrCode.printQrCode(this.tableSelection)
            }
        }
    };
  </script>
  <style scoped lang="scss"></style>
